<template>
	<view>
		<!-- 时间选择 -->
		<!-- <view class="list-filter">
			<view class="msg-box">
				<view class="item">
					<text class="label">时间类型：</text>
					<view class="text">
						<scroll-view class="time-tag-box" scroll-x="true">
							<view 
								@click="chooseTime(item.value)"
								class="time-tag" 
								:class="{ 'on': item.value == timeType }"
								v-for="(item,index) in timeList" 
								:key="index">
								{{item.label}}
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="item" v-if="timeType == 9" @click="customTime = true">
					<text class="label">自选时间：</text>
					<view class="text">
						<text class="u-p-r-10 u-tips-color">{{startDate}} 至 {{endDate}}</text>
						<u-icon name="arrow-down" class="icon-color" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view> -->
		
		<scroll-view :scroll-x="true" class="filter-bar">
			<view class="u-flex">
				<view class="item">
					<picker @change="chooseTime" :value="timeType" :range="timeList" range-key="label">
						<view>
							<u-icon name="calendar"></u-icon>
							<text class="u-p-l-4 u-p-r-10 u-font-24">{{timeList[timeType].label}}</text>
							<u-icon name="arrow-down" size="20"></u-icon>
						</view>
					</picker>
				</view>
				<view class="item" v-if="timeType == 9" @click="customTime = true">
					<view>
						<u-icon name="calendar"></u-icon>
						<text class="u-p-r-10 u-tips-color">{{startDate}} 至 {{endDate}}</text>
						<u-icon name="arrow-down" size="20"></u-icon>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 自定义时间 -->
		<u-calendar v-model="customTime" mode="range" active-bg-color="rgb(16,190,202)" range-bg-color="rgba(16,190,202,0.13)" range-color="rgb(16,190,202)" @change="calendarChange"></u-calendar>
	</view>
</template>

<script>
	export default {
		name:"list-filter",
		props: ["defaultTimeType"],
		data() {
			return {
				timeType: 0,
				customTime: false,
				startDate: '__-__-__ __:__',
				endDate: '__-__-__ __:__',
				timeList: [{
						value: 0,
						label: '全部'
					},
					{
						value: 1,
						label: '今日'
					},
					{
						value: 2,
						label: '昨日'
					},
					{
						value: 3,
						label: '本月'
					},
					{
						value: 4,
						label: '上月'
					},
					{
						value: 5,
						label: '本季度'
					},
					{
						value: 6,
						label: '上季度'
					},
					{
						value: 7,
						label: '本年'
					},
					{
						value: 8,
						label: '上年'
					},
					{
						value: 9,
						label: '自定义'
					}
				],
			};
		},
		mounted() {
			console.log('默认时间类型:',this.defaultTimeType)
			if(this.defaultTimeType){
				this.timeType = JSON.parse(this.defaultTimeType)
			}
		},
		watch:{
			defaultTimeType(value){
				console.log('watch默认时间类型:',value)
				this.timeType = JSON.parse(value)
			}
		},
		methods:{
			// 选择时间
			chooseTime(e){
				let value = e.detail.value
				if(value == 9){
					this.customTime = true
				}else{
					this.timeType = value
					this.$emit('getTimeType',value)
				}
			},
			// 选择自定义时间范围
			calendarChange(e) {
				console.log(e);
				this.timeType = 9
				this.startDate = e.startDate
				this.endDate = e.endDate
				
				this.customTime = false
				this.$emit('calendarChange',this.startDate,this.endDate)
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.list-filter{
		padding: 0 30rpx 0 30rpx;
		background-color: #fff;
		.msg-box .item .text{
			text-align: left;
		}
		.time-tag-box{
			height: 48rpx;
			white-space: nowrap;
			width: 550rpx;
		}
		.time-tag{
			display: inline-block;
			background-color: $u-bg-color;
			// width: 100rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			margin-right: 12rpx;
			border-radius: 8rpx;
			color: $u-tips-color;
			padding: 0 20rpx;
			font-size: 24rpx;
			// border: 1px solid $u-bg-color;
			&.on{
				color: $u-color-main;
				background-color: $u-type-primary-light;
				// border-color: $u-color-main;
			}
		}
		.icon-color{
			color: $u-tips-color;
		}
	}
	
	.filter-bar {
		display: flex;
		// color: #fff;
		// padding: 0 30rpx;
	
		// justify-content: space-between;
		.item {
			background-color: #fff;
			padding: 8rpx 32rpx;
			border-radius: 28rpx;
			margin-right: 10rpx;
			white-space: nowrap;
			// margin-right: 10rpx;
		}
	}
</style>